<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高考锦鲤 - 分数抽取</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6', // 主色调：蓝色
            secondary: '#10B981', // 次要色调：绿色
            accent: '#F59E0B', // 强调色：橙色
            high: '#EF4444', // 高分红色
            medium: '#F59E0B', // 中等黄色
            low: '#10B981', // 低分绿色
            dark: '#1F2937', // 深色背景
            gold: '#FFD700', // 金色
            platinum: '#E5E4E2', // 铂金色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'float': 'float 3s ease-in-out infinite',
            'spin-slow': 'spin 8s linear infinite',
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'fade-in': 'fadeIn 0.5s ease-in-out',
            'slide-up': 'slideUp 0.5s ease-out',
            'scale-in': 'scaleIn 0.3s ease-out',
            'shine': 'shine 1.5s ease-in-out',
            'card-flip': 'cardFlip 0.8s ease-in-out forwards',
            'card-appear': 'cardAppear 0.6s ease-out forwards',
            'float-up': 'floatUp 2s ease-in-out infinite',
            'glow': 'glow 2s ease-in-out infinite',
            'shine-effect': 'shineEffect 1.5s ease-in-out',
            'burst': 'burst 0.6s ease-out',
            'button-pulse': 'buttonPulse 2s infinite',
            'gacha': 'gacha 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)',
            'score-appear': 'scoreAppear 0.5s ease-out 0.3s forwards',
            'celebration': 'celebration 1.5s ease-out forwards',
            'float-down': 'floatDown 1.5s ease-in forwards',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            },
            fadeIn: {
              '0%': { opacity: '0' },
              '100%': { opacity: '1' },
            },
            slideUp: {
              '0%': { transform: 'translateY(20px)', opacity: '0' },
              '100%': { transform: 'translateY(0)', opacity: '1' },
            },
            scaleIn: {
              '0%': { transform: 'scale(0.8)', opacity: '0' },
              '100%': { transform: 'scale(1)', opacity: '1' },
            },
            shine: {
              '0%': { boxShadow: '0 0 5px rgba(239, 68, 68, 0.5)' },
              '50%': { boxShadow: '0 0 20px rgba(239, 68, 68, 0.8), 0 0 30px rgba(239, 68, 68, 0.6)' },
              '100%': { boxShadow: '0 0 5px rgba(239, 68, 68, 0.5)' },
            },
            cardFlip: {
              '0%': { transform: 'rotateY(0deg)' },
              '50%': { transform: 'rotateY(90deg) scale(1.05)' },
              '100%': { transform: 'rotateY(180deg)' },
            },
            cardAppear: {
              '0%': { transform: 'scale(0.5) translateY(50px)', opacity: '0' },
              '70%': { transform: 'scale(1.05) translateY(-10px)' },
              '100%': { transform: 'scale(1) translateY(0)', opacity: '1' },
            },
            floatUp: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-15px)' },
            },
            glow: {
              '0%, 100%': { boxShadow: '0 0 10px rgba(59, 130, 246, 0.4)' },
              '50%': { boxShadow: '0 0 25px rgba(59, 130, 246, 0.7)' },
            },
            shineEffect: {
              '0%': { backgroundPosition: '-100px 0' },
              '100%': { backgroundPosition: '120px 0' },
            },
            burst: {
              '0%': { transform: 'scale(0.8)', opacity: '0' },
              '50%': { transform: 'scale(1.2)', opacity: '0.8' },
              '100%': { transform: 'scale(1)', opacity: '1' },
            },
            buttonPulse: {
              '0%, 100%': { boxShadow: '0 0 0 rgba(245, 158, 11, 0.4)' },
              '50%': { boxShadow: '0 0 15px rgba(245, 158, 11, 0.7)' },
            },
            gacha: {
              '0%': { transform: 'translateY(-300%) scale(0.6) rotate(-15deg); opacity: 0' },
              '40%': { transform: 'translateY(10%) scale(1.05) rotate(5deg); opacity: 1' },
              '70%': { transform: 'translateY(-5%) scale(1.02) rotate(-2deg)' },
              '100%': { transform: 'translateY(0) scale(1) rotate(0deg)' },
            },
            scoreAppear: {
              '0%': { transform: 'scale(0.8); opacity: 0' },
              '70%': { transform: 'scale(1.1)' },
              '100%': { transform: 'scale(1); opacity: 1' },
            },
            celebration: {
              '0%': { transform: 'scale(0.5) translateY(20px); opacity: 0' },
              '100%': { transform: 'scale(1) translateY(0); opacity: 1' },
            },
            floatDown: {
              '0%': { transform: 'translateY(-100%) rotate(0deg); opacity: 0' },
              '100%': { transform: 'translateY(100vh) rotate(360deg); opacity: 0' },
            }
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.5);
      }
      .card-glow {
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
      }
      .card-glow-medium {
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
      }
      .card-glow-low {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
      }
      .bg-blur {
        backdrop-filter: blur(8px);
      }
      .perspective {
        perspective: 1000px;
      }
      .preserve-3d {
        transform-style: preserve-3d;
      }
      .backface-hidden {
        backface-visibility: hidden;
      }
      .rotate-y-180 {
        transform: rotateY(180deg);
      }
      .gacha-animation {
        animation: gacha 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .score-appear {
        animation: scoreAppear 0.5s ease-out 0.3s forwards;
      }
      .shine-overlay {
        position: absolute;
        top: 0;
        left: -100px;
        width: 50px;
        height: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-20deg);
        animation: shineEffect 1.5s ease-in-out;
      }
      .particle {
        position: absolute;
        border-radius: 50%;
        opacity: 0;
      }
      .card-decoration {
        position: absolute;
        opacity: 0.1;
        z-index: 0;
      }
      .button-gradient {
        background: linear-gradient(135deg, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
      }
      .button-effect {
        position: relative;
        overflow: hidden;
      }
      .button-effect::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
        transform: scale(0);
        opacity: 0;
        transition: transform 0.5s, opacity 0.5s;
      }
      .button-effect:hover::after {
        transform: scale(1);
        opacity: 1;
      }
      .gold-medal {
        background: linear-gradient(135deg, #FFD700 0%, #FFB347 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
      }
      .card-frame {
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0h22c.5 0 1 .5 1 1v22c0 .5-.5 1-1 1H11c-.5 0-1-.5-1-1V1c0-.5.5-1 1-1zm66 0h22c.5 0 1 .5 1 1v22c0 .5-.5 1-1 1H77c-.5 0-1-.5-1-1V1c0-.5.5-1 1-1zm0 66h22c.5 0 1 .5 1 1v22c0 .5-.5 1-1 1H77c-.5 0-1-.5-1-1V67c0-.5.5-1 1-1zm-66 0h22c.5 0 1 .5 1 1v22c0 .5-.5 1-1 1H11c-.5 0-1-.5-1-1V67c0-.5.5-1 1-1z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
      }
      .card-inner-shadow {
        box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
      }
      .celebration-item {
        position: absolute;
        top: -50px;
        opacity: 0;
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-dark to-primary/80 min-h-screen text-white font-sans overflow-x-hidden">
  <!-- 顶部导航 -->
  <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center bg-dark/60 backdrop-blur-md rounded-b-xl shadow-lg">
      <div class="flex items-center space-x-2">
        <i class="fa fa-graduation-cap text-accent text-2xl animate-pulse-slow"></i>
        <h1 class="text-xl font-bold text-white">黄一心高考锦鲤</h1>
      </div>
      
      <div class="flex items-center space-x-4 hidden">
        <div class="flex items-center bg-dark/40 px-3 py-1 rounded-full shadow-inner">
          <i class="fa fa-book text-secondary mr-2"></i>
          <span id="currency" class="font-medium">999</span>
        </div>
        <button class="bg-gradient-to-r from-accent to-accent/80 hover:opacity-90 text-white px-3 py-1 rounded-full transition-all duration-200 transform hover:scale-105 text-sm shadow-md button-effect">
          <i class="fa fa-plus mr-1"></i> 充值
        </button>
      </div>
    </div>
  </header>

  <!-- 背景装饰元素 -->
  <div class="fixed inset-0 z-0 pointer-events-none">
    <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse-slow"></div>
    <div class="absolute bottom-1/3 right-1/4 w-80 h-80 rounded-full bg-secondary/20 blur-3xl animate-pulse-slow" style="animation-delay: 2s;"></div>
    <div class="absolute top-1/2 right-1/3 w-40 h-40 rounded-full bg-accent/20 blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
  </div>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 pt-16 relative z-10">
    <!-- 已收集卡片展示 -->
    <section class="bg-dark/50 backdrop-blur-md rounded-2xl p-5 shadow-xl mb-2">
      <h3 class="text-xl font-bold mb-4 flex items-center">
        <i class="fa fa-th text-accent mr-2"></i> 已收集卡片
      </h3>
      <div id="collected-cards" class="grid grid-cols-3 sm:grid-cols-6 gap-3">
        <!-- 卡片将动态生成 -->
        <div class="collected-card placeholder bg-dark/30 rounded-lg h-28 flex flex-col items-center justify-center border-2 border-dashed border-white/20 text-white/40 text-xs">
          <i class="fa fa-plus text-xl mb-1"></i>
          <span>等待收集</span>
        </div>
        <div class="collected-card placeholder bg-dark/30 rounded-lg h-28 flex flex-col items-center justify-center border-2 border-dashed border-white/20 text-white/40 text-xs">
          <i class="fa fa-plus text-xl mb-1"></i>
          <span>等待收集</span>
        </div>
        <div class="collected-card placeholder bg-dark/30 rounded-lg h-28 flex flex-col items-center justify-center border-2 border-dashed border-white/20 text-white/40 text-xs">
          <i class="fa fa-plus text-xl mb-1"></i>
          <span>等待收集</span>
        </div>
        <div class="collected-card placeholder bg-dark/30 rounded-lg h-28 flex flex-col items-center justify-center border-2 border-dashed border-white/20 text-white/40 text-xs">
          <i class="fa fa-plus text-xl mb-1"></i>
          <span>等待收集</span>
        </div>
        <div class="collected-card placeholder bg-dark/30 rounded-lg h-28 flex flex-col items-center justify-center border-2 border-dashed border-white/20 text-white/40 text-xs">
          <i class="fa fa-plus text-xl mb-1"></i>
          <span>等待收集</span>
        </div>
        <div class="collected-card placeholder bg-dark/30 rounded-lg h-28 flex flex-col items-center justify-center border-2 border-dashed border-white/20 text-white/40 text-xs">
          <i class="fa fa-plus text-xl mb-1"></i>
          <span>等待收集</span>
        </div>
      </div>
    </section>

    <!-- 抽卡区域 -->
    <section class="bg-dark/50 backdrop-blur-md rounded-2xl p-5 shadow-xl mb-2 overflow-hidden relative" id="gacha-section">
      <!-- 装饰元素 -->
      <div class="absolute top-0 right-0 w-40 h-40 bg-primary/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2"></div>
      <div class="absolute bottom-0 left-0 w-32 h-32 bg-secondary/10 rounded-full blur-2xl translate-y-1/2 -translate-x-1/2"></div>
      
      <div id="gacha-container" class="relative h-80 bg-gradient-to-b from-primary/20 to-dark/40 rounded-xl overflow-hidden flex items-center justify-center perspective mb-3">
        <!-- 粒子效果容器 -->
        <div id="particles-container" class="absolute inset-0 pointer-events-none"></div>
        
        <!-- 抽卡结果区域 -->
        <div id="result-container" class="hidden absolute inset-0 flex items-center justify-center">
          <!-- 抽卡结果将在这里动态生成 -->
        </div>
        
        <!-- 初始状态 -->
        <div id="idle-state" class="text-center animate-float-up">
          <div class="w-32 h-32 mx-auto mb-4 bg-gradient-to-br from-secondary to-primary rounded-full flex items-center justify-center animate-pulse-slow glow">
            <i class="fa fa-book text-white text-5xl animate-spin-slow"></i>
          </div>
          <p class="text-white/70 text-sm">点击下方按钮开始抽取分数</p>
        </div>
        
        <!-- 抽卡动画 -->
        <div id="gacha-animation" class="hidden absolute inset-0 flex items-center justify-center">
          <div class="relative w-48 h-64 perspective">
            <!-- 卡片背面 -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary to-dark rounded-xl border-2 border-white/20 shadow-xl preserve-3d backface-hidden overflow-hidden card-frame card-inner-shadow">
              <div class="absolute inset-2 bg-white/5 rounded-lg flex flex-col items-center justify-center">
                <div class="w-24 h-24 bg-gradient-to-br from-accent to-high rounded-full flex items-center justify-center mb-4 animate-pulse">
                  <i class="fa fa-question text-white text-4xl"></i>
                </div>
                <h4 class="font-bold text-white text-2xl">??分</h4>
                <p class="text-white/60 text-xs mt-1">即将揭晓</p>
              </div>
              
              <!-- 装饰元素 -->
              <div class="absolute top-2 left-2 right-2 h-px bg-white/10"></div>
              <div class="absolute bottom-2 left-2 right-2 h-px bg-white/10"></div>
              <div class="absolute left-2 top-2 bottom-2 w-px bg-white/10"></div>
              <div class="absolute right-2 top-2 bottom-2 w-px bg-white/10"></div>
              
              <!-- 锦鲤图案 -->
              <div class="absolute inset-0 opacity-5 flex items-center justify-center">
                <i class="fa fa-graduation-cap text-white text-[200px]"></i>
              </div>
              
              <!-- 闪光效果 -->
              <div class="shine-overlay"></div>
            </div>
            
            <!-- 卡片正面 (初始隐藏) -->
            <div id="card-front" class="absolute inset-0 bg-gradient-to-br from-primary to-dark rounded-xl border-2 border-white/20 shadow-xl preserve-3d backface-hidden rotate-y-180 overflow-hidden card-frame card-inner-shadow">
              <!-- 卡片内容将在抽取后动态生成 -->
            </div>
          </div>
        </div>
        
        <!-- 庆祝效果容器 -->
        <div id="celebration-container" class="absolute inset-0 pointer-events-none hidden"></div>
      </div>
      
      <!-- 抽卡按钮 -->
      <div class="mt-3 flex justify-center">
        <button id="single-gacha" class="bg-gradient-to-r from-accent to-secondary hover:opacity-90 text-white px-8 py-3.5 rounded-full font-medium transition-all duration-300 transform hover:scale-105 shadow-lg flex items-center text-base overflow-hidden button-effect animate-button-pulse">
          <span class="relative z-10 flex items-center">
            <i class="fa fa-refresh mr-2"></i> 抽成绩卡
          </span>
        </button>
      </div>
    </section>
    
    <!-- 保底进度 -->
    <section class="bg-dark/40 backdrop-blur-sm rounded-xl p-4 hidden">
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <i class="fa fa-shield text-secondary mr-2"></i>
          <span class="text-white/80 text-sm">保底进度</span>
        </div>
        <span id="pity-count" class="text-white/80 text-sm">0/5</span>
      </div>
      <div class="mt-2 h-2 bg-dark/50 rounded-full overflow-hidden">
        <div id="pity-bar" class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 0%"></div>
      </div>
    </section>
    
    <!-- 金榜题名成绩单 (初始隐藏) -->
    <section id="gold-medal-section" class="hidden bg-dark/50 backdrop-blur-md rounded-2xl p-5 shadow-xl mb-2 overflow-hidden relative">
      <div class="absolute top-0 right-0 w-64 h-64 bg-accent/10 rounded-full blur-3xl -translate-y-1/3 translate-x-1/3"></div>
      <div class="absolute bottom-0 left-0 w-64 h-64 bg-high/10 rounded-full blur-3xl translate-y-1/3 -translate-x-1/3"></div>
      
      <div class="text-center mb-6 relative z-10">
        <h3 class="text-3xl font-bold gold-medal mb-2">高考金榜题名</h3>
        <p class="text-white/80">恭喜黄一心集齐了所有科目成绩，获得完整成绩单</p>
      </div>
      
      <div class="bg-dark/30 rounded-xl p-5 relative z-10">
        <div class="flex justify-between items-center mb-4">
          <div class="flex items-center">
            <i class="fa fa-user-circle-o text-2xl mr-2"></i>
            <span class="font-medium">考生</span>
          </div>
          <div class="text-right">
            <div class="text-sm text-white/60">考试日期</div>
            <div>2025年6月</div>
          </div>
        </div>
        
        <div class="space-y-3 mb-6">
          <div id="gold-medal-scores" class="grid grid-cols-2 gap-2">
            <!-- 成绩将动态生成 -->
          </div>
        </div>
        
        <div class="border-t border-white/10 pt-4 mt-4">
          <div class="flex justify-between items-center">
            <span class="font-medium">总分</span>
            <span class="text-2xl gold-medal font-bold" id="gold-medal-total">--</span>
          </div>
        </div>
      </div>
      
      <div class="mt-6 text-center relative z-10">
        <div class="flex justify-center space-x-4">
          <button id="share-result" class="bg-gradient-to-r from-accent to-secondary hover:opacity-90 text-white px-6 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 shadow-lg flex items-center button-effect">
            <i class="fa fa-share-alt mr-2"></i> 分享成绩
          </button>
          <button id="reset-game" class="bg-dark/40 hover:bg-dark/60 text-white px-6 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 shadow-lg flex items-center button-effect">
            <i class="fa fa-refresh mr-2"></i> 重新开始
          </button>
        </div>
      </div>
    </section>
  </main>

  <!-- 模态框 -->
  <div id="modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
    <div class="relative bg-dark rounded-2xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all duration-300 scale-95 opacity-0" id="modal-content-container">
      <div class="bg-gradient-to-r from-primary to-secondary p-3 flex justify-between items-center">
        <h3 class="text-lg font-bold text-white">抽取结果</h3>
        <button id="close-modal-btn" class="text-white hover:text-white/80 transition-colors">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div id="modal-content" class="p-5">
        <!-- 模态框内容将在这里动态生成 -->
      </div>
      <div class="p-3 bg-dark/50 border-t border-white/10 flex justify-end">
        <button id="close-modal" class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg transition-colors duration-200 text-sm flex items-center button-effect">
          <i class="fa fa-check mr-1"></i> 确定
        </button>
      </div>
    </div>
  </div>

  <script>
    // 科目数据
    const subjects = [
      { id: 1, name: "语文", minScore: 90, maxScore: 110, rarity: "high", color: "text-high", icon: "fa-book" },
      { id: 2, name: "数学", minScore: 90, maxScore: 110, rarity: "high", color: "text-high", icon: "fa-calculator" },
      { id: 3, name: "英语", minScore: 60, maxScore: 100, rarity: "medium", color: "text-medium", icon: "fa-language" },
      { id: 4, name: "化学", minScore: 60, maxScore: 80, rarity: "low", color: "text-low", icon: "fa-flask" },
      { id: 5, name: "生物", minScore: 80, maxScore: 100, rarity: "medium", color: "text-medium", icon: "fa-leaf" },
      { id: 6, name: "物理", minScore: 40, maxScore: 60, rarity: "low", color: "text-low", icon: "fa-bolt" }
    ];
    
    // 稀有度边框样式
    const rarityBorder = {
      "high": 'border-2 border-high card-glow animate-shine',
      "medium": 'border-2 border-medium card-glow-medium',
      "low": 'border-2 border-low card-glow-low'
    };
    
    // 稀有度背景色
    const rarityBg = {
      "high": 'bg-high/90',
      "medium": 'bg-medium/90',
      "low": 'bg-low/90'
    };
    
    // 稀有度粒子颜色
    const rarityParticleColors = {
      "high": ['rgba(239, 68, 68, 0.8)', 'rgba(239, 68, 68, 0.6)', 'rgba(239, 68, 68, 0.4)'],
      "medium": ['rgba(245, 158, 11, 0.8)', 'rgba(245, 158, 11, 0.6)', 'rgba(245, 158, 11, 0.4)'],
      "low": ['rgba(16, 185, 129, 0.8)', 'rgba(16, 185, 129, 0.6)', 'rgba(16, 185, 129, 0.4)']
    };
    
    // 获取DOM元素
    const singleGachaBtn = document.getElementById('single-gacha');
    const gachaContainer = document.getElementById('gacha-container');
    const idleState = document.getElementById('idle-state');
    const gachaAnimation = document.getElementById('gacha-animation');
    const resultContainer = document.getElementById('result-container');
    const currencyDisplay = document.getElementById('currency');
    const modal = document.getElementById('modal');
    const modalContent = document.getElementById('modal-content');
    const closeModalBtn = document.getElementById('close-modal-btn');
    const closeModal = document.getElementById('close-modal');
    const navbar = document.getElementById('navbar');
    const cardFront = document.getElementById('card-front');
    const particlesContainer = document.getElementById('particles-container');
    const pityCountEl = document.getElementById('pity-count');
    const pityBarEl = document.getElementById('pity-bar');
    const collectedCardsEl = document.getElementById('collected-cards');
    const goldMedalSection = document.getElementById('gold-medal-section');
    const goldMedalScores = document.getElementById('gold-medal-scores');
    const goldMedalTotal = document.getElementById('gold-medal-total');
    const shareResultBtn = document.getElementById('share-result');
    const resetGameBtn = document.getElementById('reset-game');
    const gachaSection = document.getElementById('gacha-section');
    const celebrationContainer = document.getElementById('celebration-container');
    
    // 初始货币和保底计数
    let currency = 999;
    let pityCount = 0;
    let collectedSubjects = new Set(); // 已收集的科目ID
    let currentScores = []; // 存储当前抽取的所有科目分数
    
    // 更新货币显示
    function updateCurrency() {
      currencyDisplay.textContent = currency;
    }
    
    // 更新保底进度
    function updatePityCount() {
      pityCountEl.textContent = `${pityCount}/5`;
      pityBarEl.style.width = `${(pityCount / 5) * 100}%`;
    }
    
    // 随机抽取分数
    function drawScore(subjectId) {
      const subject = subjects.find(s => s.id === subjectId);
      if (!subject) return null;
      
      // 如果保底计数达到5，强制获得高分
      if (pityCount >= 5 && subject.rarity !== "high") {
        pityCount = 0;
        updatePityCount();
        
        // 从高分科目中随机选择
        const highSubjects = subjects.filter(s => s.rarity === "high");
        const randomHighSubject = highSubjects[Math.floor(Math.random() * highSubjects.length)];
        const score = Math.floor(Math.random() * (randomHighSubject.maxScore - randomHighSubject.minScore + 1)) + randomHighSubject.minScore;
        
        return { ...randomHighSubject, score, isPity: true };
      }
      
      // 随机生成分数
      const score = Math.floor(Math.random() * (subject.maxScore - subject.minScore + 1)) + subject.minScore;
      
      // 增加保底计数
      if (subject.rarity !== "high") {
        pityCount++;
      } else {
        pityCount = 0;
      }
      
      updatePityCount();
      
      return { ...subject, score };
    }
    
    // 生成卡片正面内容
    function generateCardFront(scoreData) {
      const rarityClass = scoreData.color.replace('text-', 'bg-');
      const borderClass = rarityBorder[scoreData.rarity];
      
      return `
        <div class="absolute inset-0 bg-gradient-to-br from-${scoreData.rarity === "high" ? "high/10" : scoreData.rarity === "medium" ? "medium/10" : "low/10"} to-dark/80 rounded-xl ${borderClass} overflow-hidden">
          <!-- 背景装饰 -->
          <div class="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-b from-white/10 to-transparent"></div>
          <div class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-white/10 to-transparent"></div>
          
          <!-- 卡片内容 -->
          <div class="relative h-full flex flex-col">
            <!-- 科目图标区域 -->
            <div class="h-36 overflow-hidden relative flex items-center justify-center bg-dark/30">
              <i class="fa ${scoreData.icon} ${scoreData.color} text-8xl opacity-20 absolute"></i>
              <div class="z-10 text-center">
                <i class="fa ${scoreData.icon} ${scoreData.color} text-6xl mb-2"></i>
                <h3 class="text-xl font-bold text-white">${scoreData.name}</h3>
              </div>
              <div class="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-dark to-transparent"></div>
            </div>
            
            <!-- 分数信息 -->
            <div class="flex-1 flex flex-col justify-center items-center p-4">
              <div class="text-4xl font-bold ${scoreData.color} mb-2 score-appear">${scoreData.score}</div>
              <div class="text-sm text-white/70 mb-3">预估分数</div>
              
              <!-- 评分 -->
              <div class="flex items-center space-x-1 mb-4">
                ${generateRatingStars(scoreData.score)}
              </div>
              
              <!-- 稀有度标签 -->
              <div class="px-3 py-1 rounded-full ${rarityBg[scoreData.rarity]} text-xs font-medium">
                ${scoreData.rarity === "high" ? "黄卡" : scoreData.rarity === "medium" ? "一卡" : "心卡"}
              </div>
              
              ${scoreData.isPity ? '<div class="mt-2 text-xs text-accent bg-dark/30 px-2 py-0.5 rounded-full">保底触发</div>' : ''}
            </div>
          </div>
        </div>
      `;
    }
    
    // 生成评分星星
    function generateRatingStars(score) {
      const stars = Math.round(score / 15); // 15分一个星
      let html = '';
      
      for (let i = 1; i <= 5; i++) {
        if (i <= stars) {
          html += `<i class="fa fa-star ${i <= 3 ? 'text-accent' : 'text-gold'}"></i>`;
        } else if (i - 0.5 <= stars) {
          html += `<i class="fa fa-star-half-o ${i <= 3 ? 'text-accent' : 'text-gold'}"></i>`;
        } else {
          html += '<i class="fa fa-star-o text-white/30"></i>'
        }
      }
      
      return html;
    }
    
    // 创建粒子效果
    function createParticles(rarity, count = 30) {
      const colors = rarityParticleColors[rarity];
      const container = particlesContainer;
      
      // 清除现有粒子
      container.innerHTML = '';
      
      for (let i = 0; i < count; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // 随机大小
        const size = Math.random() * 12 + 8;
        
        // 随机颜色
        const color = colors[Math.floor(Math.random() * colors.length)];
        
        // 随机位置
        const left = Math.random() * 100;
        const top = Math.random() * 100;
        
        // 随机动画属性
        const delay = Math.random() * 0.8;
        const duration = Math.random() * 1.5 + 1;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.backgroundColor = color;
        particle.style.left = `${left}%`;
        particle.style.top = `${top}%`;
        particle.style.animation = `floatUp ${duration}s ease-in-out ${delay}s infinite`;
        
        container.appendChild(particle);
      }
    }
    
    // 创建庆祝效果
    function createCelebrationEffect() {
      const container = celebrationContainer;
      container.innerHTML = '';
      
      // 创建庆祝图标
      const icons = ['fa-star', 'fa-trophy', 'fa-medal', 'fa-graduation-cap'];
      const colors = ['text-accent', 'text-gold', 'text-high', 'text-secondary'];
      
      for (let i = 0; i < 30; i++) {
        const icon = document.createElement('div');
        icon.className = 'celebration-item';
        
        // 随机图标和颜色
        const randomIcon = icons[Math.floor(Math.random() * icons.length)];
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        
        // 随机位置和大小
        const left = Math.random() * 100;
        const size = Math.random() * 20 + 15;
        const delay = Math.random() * 2;
        const duration = Math.random() * 3 + 4;
        const rotation = Math.random() * 360;
        
        icon.innerHTML = `<i class="fa ${randomIcon} ${randomColor} text-${Math.floor(size)}px"></i>`;
        icon.style.left = `${left}%`;
        icon.style.animation = `floatDown ${duration}s ease-in ${delay}s forwards`;
        icon.style.transform = `rotate(${rotation}deg)`;
        
        container.appendChild(icon);
      }
      
      container.classList.remove('hidden');
    }
    
    // 显示模态框
    function showModal(content) {
      modalContent.innerHTML = content;
      modal.classList.remove('hidden');
      
      // 添加动画延迟
      setTimeout(() => {
        modalContentContainer.classList.remove('scale-95', 'opacity-0');
        modalContentContainer.classList.add('scale-100', 'opacity-100');
      }, 50);
    }
    
    // 隐藏模态框
    function hideModal() {
      modalContentContainer.classList.remove('scale-100', 'opacity-100');
      modalContentContainer.classList.add('scale-95', 'opacity-0');
      
      setTimeout(() => {
        modal.classList.add('hidden');
      }, 300);
    }
    
    // 更新已收集卡片显示
    function updateCollectedCards() {
      collectedCardsEl.innerHTML = '';
      
      subjects.forEach(subject => {
        const card = document.createElement('div');
        
        if (collectedSubjects.has(subject.id)) {
          // 已收集的卡片
          const scoreData = currentScores.find(s => s.id === subject.id);
          card.className = `collected-card bg-dark/30 rounded-lg h-28 overflow-hidden border-2 ${rarityBorder[subject.rarity].replace('animate-shine', '')}`;
          card.innerHTML = `
            <div class="h-16 overflow-hidden flex items-center justify-center bg-dark/40">
              <i class="fa ${subject.icon} ${subject.color} text-4xl"></i>
            </div>
            <div class="p-2 flex justify-between items-center">
              <div class="text-xs font-medium">${subject.name}</div>
              <div class="text-xs ${scoreData.color} font-bold">${scoreData.score}</div>
            </div>
          `;
        } else {
          // 未收集的卡片
          card.className = `collected-card placeholder bg-dark/30 rounded-lg h-28 flex flex-col items-center justify-center border-2 border-dashed border-white/20 text-white/40 text-xs`;
          card.innerHTML = `
            <i class="fa fa-plus text-xl mb-1"></i>
            <span>等待收集</span>
          `;
        }
        
        collectedCardsEl.appendChild(card);
      });
      
      // 检查是否集齐所有科目
      if (collectedSubjects.size === subjects.length) {
        showGoldMedal();
      }
    }
    
    // 显示金榜题名成绩单
    function showGoldMedal() {
      // 按科目ID排序
      const sortedScores = currentScores.sort((a, b) => a.id - b.id);
      
      // 创建庆祝效果
      createCelebrationEffect();
      
      // 生成成绩单内容
      goldMedalScores.innerHTML = '';
      sortedScores.forEach(scoreData => {
        const scoreItem = document.createElement('div');
        scoreItem.className = 'flex justify-between items-center p-3 bg-dark/20 rounded-lg';
        scoreItem.innerHTML = `
          <div class="flex items-center">
            <i class="fa ${scoreData.icon} ${scoreData.color} mr-2"></i>
            <span>${scoreData.name}</span>
          </div>
          <span class="font-bold ${scoreData.color}">${scoreData.score}分</span>
        `;
        goldMedalScores.appendChild(scoreItem);
      });
      
      // 计算总分
      const totalScore = currentScores.reduce((sum, scoreData) => sum + scoreData.score, 0);
      goldMedalTotal.textContent = `${totalScore}分`;
      
      // 显示成绩单
      setTimeout(() => {
        gachaSection.classList.add('hidden');
        goldMedalSection.classList.remove('hidden');
        goldMedalSection.classList.add('animate-fade-in');
      }, 2000);
    }
    
    // 执行单科抽卡
    function performSingleGacha() {
      if (currency < 100) {
        showModal(`
          <div class="text-center py-4">
            <i class="fa fa-exclamation-circle text-accent text-4xl mb-3"></i>
            <h4 class="text-lg font-bold mb-2">学习点不足</h4>
            <p class="text-white/70 mb-4">你的学习点不足，无法进行抽取</p>
            <button class="bg-gradient-to-r from-accent to-secondary hover:opacity-90 text-white px-4 py-2 rounded-lg transition-all duration-200 button-effect">
              立即充值
            </button>
          </div>
        `);
        return;
      }
      
      // 扣除货币
      currency -= 100;
      updateCurrency();
      
      // 找出未收集的科目
      const uncollectedSubjects = subjects.filter(s => !collectedSubjects.has(s.id));
      
      // 如果所有科目都已收集，随机选择一个
      let subjectId;
      if (uncollectedSubjects.length === 0) {
        subjectId = subjects[Math.floor(Math.random() * subjects.length)].id;
      } else {
        // 优先从未收集的科目中选择
        subjectId = uncollectedSubjects[Math.floor(Math.random() * uncollectedSubjects.length)].id;
      }
      
      const scoreData = drawScore(subjectId);
      
      if (!scoreData) return;

      // 更新当前分数
      const existingIndex = currentScores.findIndex(s => s.id === scoreData.id);
      if (existingIndex !== -1) {
        // 如果已存在该科目分数，替换为新分数（如果更高）
        if (currentScores[existingIndex].score < scoreData.score) {
          currentScores[existingIndex] = scoreData;
        }
      } else {
        currentScores.push(scoreData);
        // 添加到已收集科目
        collectedSubjects.add(scoreData.id);
      }
                  
      // 更新已收集卡片
      setTimeout(() => {
        updateCollectedCards();
      }, 3000);
      
      // 显示抽卡动画
      idleState.classList.add('hidden');
      gachaAnimation.classList.remove('hidden');
      cardFront.innerHTML = generateCardFront(scoreData);
      
      // 创建粒子效果
      createParticles(scoreData.rarity);
      
      // 卡片翻转动画
      setTimeout(() => {
        const card = gachaAnimation.querySelector('.preserve-3d');
        card.classList.add('rotate-y-180');
        card.style.transition = 'transform 0.8s ease-in-out';
        
        // 显示结果
        setTimeout(() => {
          gachaAnimation.classList.add('hidden');
          resultContainer.classList.remove('hidden');
          resultContainer.innerHTML = generateCardFront(scoreData);
          
          // 3秒后回到初始状态
          setTimeout(() => {
            resultContainer.classList.add('hidden');
            idleState.classList.remove('hidden');
          }, 1000);
        }, 800);
      }, 500);
    }
    
    // 重置游戏
    function resetGame() {
      currency = 999;
      pityCount = 0;
      collectedSubjects = new Set();
      currentScores = [];
      
      updateCurrency();
      updatePityCount();
      updateCollectedCards();
      
      goldMedalSection.classList.add('hidden');
      gachaSection.classList.remove('hidden');
      celebrationContainer.classList.add('hidden');
    }
    
    // 事件监听
    singleGachaBtn.addEventListener('click', performSingleGacha);
    closeModalBtn.addEventListener('click', hideModal);
    closeModal.addEventListener('click', hideModal);
    resetGameBtn.addEventListener('click', resetGame);
    
    // 分享结果（模拟）
    shareResultBtn.addEventListener('click', () => {
      showModal(`
        <div class="text-center py-4">
          <i class="fa fa-share-alt text-accent text-4xl mb-3"></i>
          <p class="text-white/70 mb-4">成绩已复制到剪贴板，快去分享给朋友吧！</p>
          <div class="flex justify-center space-x-3 mb-4">
            <button class="w-10 h-10 rounded-full bg-[#07C160]/80 flex items-center justify-center hover:opacity-90 transition-colors duration-200">
              <i class="fa fa-wechat text-white"></i>
            </button>
            <button class="w-10 h-10 rounded-full bg-[#E6162D]/80 flex items-center justify-center hover:opacity-90 transition-colors duration-200">
              <i class="fa fa-weibo text-white"></i>
            </button>
            <button class="w-10 h-10 rounded-full bg-[#12B7F5]/80 flex items-center justify-center hover:opacity-90 transition-colors duration-200">
              <i class="fa fa-qq text-white"></i>
            </button>
          </div>
          <button class="bg-gradient-to-r from-accent to-secondary hover:opacity-90 text-white px-4 py-2 rounded-lg transition-all duration-200 button-effect">
            <i class="fa fa-download mr-1"></i> 保存图片
          </button>
        </div>
      `);
    });
    
    // 滚动时改变导航栏样式
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('bg-dark/80');
        navbar.classList.remove('bg-dark/60');
      } else {
        navbar.classList.remove('bg-dark/80');
        navbar.classList.add('bg-dark/60');
      }
    });
  </script>
</body>
</html>
  